<template>
  <div>
    <!-- <p> 所属商家 山东悦朋智能科技有限公司</p> -->
    <el-form
      :model="shop"
      ref="ruleForm"
      label-width="120px"
      class="demo-ruleForm"
    >
      <el-form-item label="门店所在区域">
        <el-cascader :options="options" v-model="selectedOptions" @change="handleChange">
       </el-cascader>
        <!-- <el-input v-model="shop.province" style="width: 100px"></el-input>
        <el-input v-model="shop.city" style="width: 100px"></el-input>
        <el-input v-model="shop.oparate_area" style="width: 100px"></el-input>
        <el-input v-model="shop.area" style="width: 100px"></el-input> -->
      </el-form-item>
      <el-form-item label="详细地址" prop="addresss" style="width: 50%">
        <el-input v-model="shop.address" ></el-input>
      </el-form-item>
      <el-form-item label="管理区域" >
        <el-input v-model="shop.area" style="width: 50%"></el-input>
          <!-- <el-select @change="currStationChange" v-model="shop.oparate_area">
            <el-option label="金水区" value="金水区"></el-option>
          </el-select> -->
        </el-form-item>
        <el-form-item label="所在区" prop="oparate_area">
            <el-input v-model="shop.oparate_area" placeholder="所在区" style="width: 50%"></el-input>
        </el-form-item>
      <el-form-item label="门店名称" prop="name">
        <el-input v-model="shop.name" style="width: 50%"></el-input>
      </el-form-item>
      <el-form-item label="业态" prop="type">
        <el-input v-model="shop.type" style="width: 50%"></el-input>
      </el-form-item>
      <el-form-item label="配送属性" >
        <el-checkbox-group v-model="shop.can_take_self">
          <el-checkbox label="到店自提" name="can_take_self"></el-checkbox>
          <el-checkbox label="门店配送" name="can_reserve"></el-checkbox>
          <el-checkbox label="第三方配送" name="can_take_self"></el-checkbox>
        </el-checkbox-group>
      </el-form-item>
      <el-form-item label="营业时间" required prop="open_time">
        <el-time-picker
          v-model="shop.open_time"
          :picker-options="{
            selectableRange: '18:30:00 - 20:30:00',
          }"
          placeholder="开始时间"
        >
        </el-time-picker>
        <el-time-picker
          arrow-control
          v-model="value2"
          :picker-options="{
            selectableRange: '18:30:00 - 20:30:00',
          }"
          placeholder="结束时间"
        >
        </el-time-picker>
      </el-form-item>
      <el-form-item label="支持预定" prop="delevery_type" required>
        <el-switch v-model="shop.delevery_type"></el-switch>
      </el-form-item>
      <el-form-item label="预定间隔时间" prop="reserve_interval" required>
        <!-- <el-select v-model="shop.reserve_interval" placeholder="请选择">
          <el-option
            v-for="item in option"
            :key="item.value"
            :label="item.label"
            :value="item.value"
          >
          </el-option>
        </el-select> -->
      </el-form-item>
      <el-form-item label="备货时长" prop="reserve_range" required>
        <!-- <el-select v-model="shop.reserve_range" placeholder="请选择">
          <el-option
            v-for="item in time"
            :key="item.val"
            :label="item.label"
            :value="item.value"
          >
          </el-option>
        </el-select> -->
      </el-form-item>
      <el-form-item label="位置坐标">
          <input type="text"  @change="handler" v-model="location.lng"  />--
          <input type="text" v-model="location.lat"  />
          <baidu-map
            class="bm-view"
            @click="zoomchange"
            @moving="syncCenterAndZoom"
            @moveend="syncCenterAndZoom"
            @zoomend="syncCenterAndZoom"
            :center="{ lng:location.lng, lat: location.lat }"
            :zoom="zoom"
            :scroll-whell-zoom="true"
          >
          <bm-local-search :keyword="keyword" :auto-viewport="true"></bm-local-search>
          </baidu-map>
        </el-form-item>
      <el-form-item style="margin:30px" label="门店图片">
        <el-upload
          action="https://jsonplaceholder.typicode.com/posts/"
          list-type="picture-card"
          :on-preview="handlePictureCardPreview"
          :on-remove="handleRemove"
        >
          <i class="el-icon-plus"></i>
        </el-upload>
        <el-dialog :visible.sync="dialogVisible">
          <img width="100%" :src="dialogImageUrl" alt="" />
        </el-dialog>
      </el-form-item>

      <el-form-item label="联系人" prop="contact_name">
        <el-input v-model="shop.contact_name" style="width: 50%"></el-input>
      </el-form-item>
      <el-form-item label="联系电话" prop="contact_phone">
        <el-input v-model="shop.contact_phone" style="width: 50%" ></el-input>
      </el-form-item>
      <el-form-item label="是否上线" prop="">
        <el-switch v-model="online"></el-switch>
      </el-form-item>
      <el-form-item>
        <el-button type="primary" @click="editShop()">提交</el-button>
      </el-form-item>
    </el-form>
  </div>
</template>
<script>
import { regionData,CodeToText } from "element-china-area-data";
import { EditShop, GetShop } from "@/api/shop";
import bus from '@/utils/bus.js'
export default {
  data() {
    return {
      zoom:17,
      online:true,
      keyword:'',
      location:{
        lat:116.294625,
        lng:39.961627
      },
      shop: {
        // type: [],
      },
      //上传图片
      dialogImageUrl: "",
      dialogVisible: false,
      val: "",
      //省市级联数据
      options: regionData,
      selectedOptions: [],
      value1: new Date(2016, 9, 10, 18, 40),
      value2: new Date(2016, 9, 10, 18, 40),
      lat: null,
      lng: null,
    };
  },
  created() {
    GetShop({ id: this.$route.params.id }).then((res) => {
      if (res && res.data && res.data.code == 0) {
        this.shop = res.data.data[0];
      }
    });
  },
  methods: {
    currStationChange(val){
        console.log("currStationChange",val);
        this.keyword=val
    },
    syncCenterAndZoom(e){
        const {lng,lat}=e.target.getCenter()
        this.location.lng=lng;
        this.location.lat=lat;
        this.shop.lat=lat;
        this.shop.lon=lng;
        this.zoom=e.target.getZoom()

    },
    handleChange(value) {
    // 选择完成之后，它最后的值其实是一个区域码，并不是文字，需要自己用CodeToText处理数据
      console.log(value, "省市级联的编号");//['110000', '110100', '110101']
      let codeStr=value.join(',')
      console.log(codeStr,'字符串');//110000,110100,110101
      let name=this.getCodeToText(codeStr,value)
      console.log(name,"名字");//北京市/市辖区/东城区
      this.keyword=name;
      this.last = name.split('/').slice(-1)
      this.shop.oparate_area=this.last[0]

    },
    handler({BMap,map}){
        let point=new BMap.Point(this.location.lng,this.location.lat)
        map.centerAndZoom(point,13)
        var marker=new BMap.Marker(point)
        map.addOverlay(marker)
        var circle=new BMap.Circle(point,6,{strokeColor:'blue'})
        map.addOverlay(circle)
    },
    getCodeToText(codeStr, codeArray) {
      if (null === codeStr && null === codeArray) {
        return null;
      } else if (null === codeArray) {
        codeArray = codeStr.split(",");
      }

      let area = "";
      switch (codeArray.length) {
        case 1:
          area += CodeToText[codeArray[0]];
          break;
        case 2:
          area += CodeToText[codeArray[0]] + "/" + CodeToText[codeArray[1]];
          break;
        case 3:
          area +=
            CodeToText[codeArray[0]] +
            "/" +
            CodeToText[codeArray[1]] +
            "/" +
            CodeToText[codeArray[2]];
          break;
        default:
          break;
      }
      return area;
    },

    zoomchange(e) {
      this.map.setCenterAndZoom(this.point, this.zoom)
      console.log(e, "地图");
      this.lat = e.point.lat;
      this.lng = e.point.lng;
    },
    handleRemove(file, fileList) {
      console.log(file, fileList);
    },
    handlePictureCardPreview(file) {
      this.dialogImageUrl = file.url;
      this.dialogVisible = true;
    },

    editShop() {
      
      var data = { ...this.shop };
      EditShop(data).then((res) => {
        if (res && res.data && res.data.code === 0) {
          this.$message({
            type: "success",
            message: "编辑成功，2秒后自动返回",
          });
          bus.$emit("update",true)
          setTimeout(() => {
            this.$router.back();
          }, 1500);
        }

      });
    },
  
    submitForm(formName) {
      this.$refs[formName].validate((valid) => {
        if (valid) {
          alert("submit!");
        } else {
          console.log("error submit!!");
          return false;
        }
      });
    },
    resetForm(formName) {
      this.$refs[formName].resetFields();
    },
  },
};
</script>
<style>
.bm-view {
  width: 50%;
  height: 400px;
}
</style>
